{% extends 'base.html' %}

{% block title %}首页{% endblock %}

{% block acticle %}
    <div class="swiper">
        <img src="{% static 'images/20230526045310.png' %}" alt="">
        <img src="{% static 'images/20230505033923.png' %}" alt="">
        <img src="{% static 'images/20230316042846.jpg' %}" alt="">
        <div class="dot">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
        <a class="left"></a>
        <a class="right"></a>
    </div>

{% endblock %}

{% block main %}
    <!-- 网站主体 -->
    <div id="main" class="clearfix">
        <!-- 定义右侧窗口信息 -->
        <section class="aside">
            <aside class="ad">
                <a href="https://marketing.csdn.net/p/4735d7486feed7324fe2fbdbce1a9906?utm_medium=ad.209">
                    <img src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1682496876274.png" alt="">
                </a>
            </aside>

            <aside class="author_top">
                <span class="title">作者推荐</span>
                <hr>
                {% for user in users %}
                    {% if user.id == request.session.id %}
                        <div>
                            <img class="avator" src="/media/{{ user.icon }}"/>
                            <span class="name">{{ user.username }}</span>
                            <a class="at">自己</a>
                        </div>

                    {% else %}
                        <div>
                        <img class="avator" src="/media/{{ user.icon }}"/>
                        <span class="name">{{ user.username }}</span>
                        <input style="cursor: pointer;" href="{% url 'auth:concern' user.id %}" readonly
                                   name="{{ user.id }}" value="关注" class="at followUser"/>
                    </div>
                    {% endif %}
                {% endfor %}

            </aside>
        </section>

        <section>
            <div class="title first">
                <a>热门资源</a>
                <a class="more-m" href="./catalog.html">更多</a>
            </div>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>


            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>


            <div class="title">
                <a>精选资源</a>
                <a class="more-m" href="./catalog.html">更多</a>
            </div>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>


            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>

            <dl class="items">
                <dd>
                    <a href="./detail.html">
                        <div class="size">文件大小:<em>10.2M</em></div>
                        <div class="filename">vc++6.0 绿色版 完整版（支持win7，win8系统）</div>
                        <div class="score">积分:<em>2</em><br/>浏览:<em>330</em></div>
                        <img class="thumbimg" src="{% static 'images/rar.svg' %}"/>
                    </a>
                </dd>
                <dt>
                    <a href="./detail.html">vc++6.0 绿色版 完整版（支持win7，win8系统）</a>
                </dt>
            </dl>


        </section>
    </div>
{% endblock %}

{% block myscript %}
    <script>
        $(function () {

            $(".followUser").each(function () {
                $(this).click(function () {
                    // 获取循环的id
                    let id = $(this).attr("name")
                    // 发送ajax请求
                    $.ajax({
                        url: '/user/concern/' + id,
                        type: 'get',
                        success: function (res) {
                            alert(res.msg)
                            console.log(res)

                            if (res.msg === "取消关注成功") {
                                $(this).val("关注")
                            }
                            if (res.msg === "关注成功") {
                                $(this).val("已关注")
                            }
                        }
                    })
                })

            })

        })
    </script>
{% endblock %}


		

